<template>
  <div class="dashboard-container">
    <!-- 顶栏 -->
    <el-header class="top-bar">
      <el-menu :default-active="activeIndex" mode="horizontal" @select="handleMenuSelect">
        <el-menu-item index="1">用户管理</el-menu-item>
        <el-menu-item index="2">管理员管理</el-menu-item>
      </el-menu>
    </el-header>

    <!-- 搜索栏 -->
    <el-input
        placeholder="请输入用户名"
        v-model="searchText"
        class="search-bar"
        @input="handleSearch"
        clearable>
      <!-- 搜索按钮 -->
      <template slot="append">
        <el-button icon="el-icon-search" @click="performSearch">搜索</el-button>
      </template>
    </el-input>

    <!-- 用户信息表格 -->
    <el-table
        :data="filteredUsers"
        style="width: auto;"
        class="user-table">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <!-- 操作列 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              type="primary"
              size="small"
              @click="handleEdit(scope.row)">修改</el-button>
          <el-button
              type="danger"
              size="small"
              @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      searchText: '',
      users: [], // 假设这是从API获取的用户数据
      filteredUsers: [] // 过滤后的用户数据
    };
  },
  methods: {
    handleSearch() {
      // 搜索逻辑
    },
    performSearch() {
      // 执行搜索的逻辑
    },
    handleEdit(row) {
      // 编辑用户的逻辑
    },
    handleDelete(row) {
      // 删除用户的逻辑
    },
    fetchUsers() {
      // 从后端API获取用户数据的逻辑
    }
  },
  mounted() {
    this.fetchUsers();
  }
};
</script>

<style scoped>
.dashboard-container {
  margin: 30px;
}
.top-bar {
  width: 100%;
  margin-left: 0; /* 确保顶栏顶格 */
}
.search-bar {
  width: 300px; /* 根据需要调整 */
  margin-bottom: 20px;
}
.user-table {
  margin-top: 20px;
}
</style>